<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.min.js"></script>
    <script src="./js/dayjs.min.js"></script>
</head>
<body>
    <!-- 
        1.主要是管道符 | ，将前一个的输出作为后一个的输入，然后经函数运算得到一个结果，
        用这个结果替换整个插值表达式中的内容 
        2.用于处理简单的情况
    -->
    <div id="root">
        <!-- 不传参 -->
        <h2>现在是：{{ time | timeFormat}}</h2>
        <!-- 传参，已经给定了第一个参数是时间戳，即管道符前面的 -->
        <h2>现在是：{{ time | timeFormat("YYYY_MM_DD")}}</h2>
        <h2>截取前的字符串：{{ str }}</h2>
        <h2>截取后的字符串：{{ str | mySlice}}</h2>

    </div>

    <script>
        Vue.config.productionTip = false;

        // 定义一个全局的过滤器
        // mySlice是过滤器的名字，value是传入的参数，返回的是对参数处理后的结果
        Vue.filter('mySlice', function(value) {
            return value.slice(0, 4);
        })

        new Vue({
            el: "#root",
            data: {
                time: 1621561377603,  // 时间戳      
                str: 'Hello world'
            },
            methods: {
                
            },
            // 这是局部的过滤器，只在当前实例中有效
            filters: {
                timeFormat(value, str="YYYY年MM月DD日 HH时:mm分:ss秒") {  
                    // 第一个参数value是时间戳，如果不传入value参数，则默认使用当前的时间
                    // 第二个参数是格式化字符串，给定一个默认值，调用的时候如果不传参，使用默认的格式化字符串；如果传参，则使用传入的参数
                    // dayjs的使用：引入后，就有了dayjs()函数，里面的参数是一个时间戳
                    return dayjs(value).format(str);
                }
            }
        })
    </script>
</body>
</html>